<template>
<div class="home"> 

<home-header class="home-header" :city="city"></home-header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-catalog :iconList="iconList"></home-catalog>
<home-hot 
  :hotPriseList="hotPriseList"
  :hotTrendList="hotTrendList"
  :hotContentList="hotContentList"
></home-hot>
<home-weekend :weekendList="weekendList"></home-weekend>
<home-guess :guessList="guessList"></home-guess>
</div>

</template>

<script>
import axios from 'axios'
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatalog from './components/homeCatalog'
import homeHot from './components/homeHot'
import homeWeekend from './components/homeWeekend'
import homeGuess from './components/homeGuess'

export default {
  name: 'Home',
  components: {
      homeHeader,
      homeSwiper,
      homeCatalog,
      homeHot,
      homeWeekend,
      homeGuess
    
  },
  data(){
    return{
      city:'',
      guessList:[],
      hotPriseList:[],
      hotTrendList:[],
      hotContentList:[],
      iconList:[],
      swiperList:[],
      weekendList:[]
    }
  },
  methods:{
    getHomeData(){
      axios.get("/api/index.json")
          .then(this.getHomeDataSucc)
    },
    getHomeDataSucc(res){
    //console.log(res)
       res=res.data
      if(res.data){
        const data=res.data
        this.city=data.city
        this.guessList=data.guessList
        this.hotContentList=data.hotContentList
        this.hotPriseList=data.hotPriseList
        this.hotTrendList=data.hotTrendList
        this.iconList=data.iconList
        this.swiperList=data.swiperList
        this.weekendList=data.weekendList
      }
      }
     },
  mounted(){
    this.getHomeData()
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
  position relative
  .home-header 
    position fixed 
    top 0
    left 0
    width 100%
    z-index 99
</style>
